<template>
  <div id="contain">
    <div>
      <el-table
        :data="tableList"
        style="width: 945px"
        stripe
        :row-style="rowStyle"
        :cell-style="cellStyle"
      >
        <el-table-column prop="name" label="酒店名" align="center">
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center">
        </el-table-column>
        <el-table-column prop="loginName" label="发布者账号" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-button type="mini" @click="edit(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="pass(scope.row)"
              >通过</el-button
            >
            <el-button type="mini" style="color: red" @click="clear(scope.row)"
              >不通过</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block"> 
      <el-pagination
        :current-page.sync="page"
        :page-sizes="[10, 20]"
        :page-size="limit"
        layout="sizes, prev, pager, next"
        :total="totalCount"
      >
      </el-pagination>
    </div>
    <el-dialog title="查看攻略信息" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="酒店名称" style="width: 450px">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="酒店图片">
          <img :src="form.pic" alt="图片加载失败" style="width:380px;height:220px">
        </el-form-item>
        <el-form-item label="地址" style="width: 600px">
          <el-input v-model="form.address" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系电话" style="width: 320px">
          <el-input v-model="form.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="经济间价格" style="width: 250px">
          <el-input v-model="form.economyPrice" disabled></el-input>
        </el-form-item>
        <el-form-item label="单人间价格" style="width: 250px">
          <el-input v-model="form.singlePrice" disabled></el-input>
        </el-form-item>
        <el-form-item label="双人间价格" style="width: 250px">
          <el-input v-model="form.doublePrice" disabled></el-input>
        </el-form-item>
        <el-form-item label="多人间价格" style="width: 250px">
          <el-input v-model="form.manyPrice" disabled></el-input>
        </el-form-item>
        <el-form-item label="套房价格" style="width: 250px">
          <el-input v-model="form.vipPrice" disabled></el-input>
        </el-form-item>
        <el-form-item label="酒店星级">
          <span>{{form.star}}</span>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: window.localStorage.getItem("token"),
      tableList: [],
      page:1,
      limit:20,
      totalCount:0,
       dialogFormVisible: false,
      form: {},
    };
  },
  mounted() {
    this.fn();
  },
  methods: {
    fn() {
      this.$axios({
        method: "post",
        url: "/sys/msg/hotel",
        headers: { token: this.token },
      }).then((res) => {
        //   console.log('申请jiudian');
        //   console.log(res);
        //   console.log(res.data.page);
        this.tableList = res.data.page;
        this.tableList.forEach((item) => {
          item.status =
            item.status === 1
              ? "审核通过"
              : item.status === 0
              ? "未审核"
              : "未通过或撤销";
        });
        this.totalCount=this.tableList.length
        // console.log(this.tableList);
      });
    },
      rowStyle() {
      return { height: "60px" };
    },
    cellStyle(k) {
      if (k.columnIndex === 3) {
        if (k.row.status === "审核通过") {
          return { color: "#33CC00" };
        } else if (k.row.status === "未审核") {
          return { color: "blue" };
        } else {
          return { color: "red" };
        }
      }
    },
    pass(k){
        // console.log(k.hotelId);
        this.$axios({
        method: "post",
        url: "/sys/msg/hotel/status",
        headers: { token: this.token },
        data:{hotelId:k.hotelId,status:1}
      }).then((res)=>{
        //   console.log(res);
          if(res.data.code===0){
              this.fn();
          }
      })
    },
    edit(k) {
      this.form = k;
      // console.log("this.form");
      // console.log(this.form);
      this.dialogFormVisible = true;
    },
    clear(k) {
      let id = k.hotelId;
      this.$axios({
        method: "post",
        url: "/hotel/del",
        headers: { token: this.token },
        data: { hotelId: id },
      }).then((res) => {
        // console.log(res);
        if (res.data.code === 0) {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          this.getlist();
        }
      });
    },
  },
};
</script>
<style  scoped>
</style>>